import {designPage} from "@peryl/react-compose";
import {i18n, Icon} from "plain-design";
import {buildAssetsPath} from "../../common/buildAssetsPath";
import {createNextGetter} from "../../common/createNextGetter";

export const UserInfoArticle = designPage(() => {

  const teamOptions = i18n.$intl('page.workspace.myTeamOptions').d('') as any as { title: string, avatar: string, desc: string }[];
  const projectOptions = i18n.$intl('page.workspace.projects').d('') as any as { title: string, logo: string, description: string }[];

  const nextTeamMember = createNextGetter(teamOptions);
  const nextProject = createNextGetter(projectOptions);

  const articles = new Array(18).fill(1).map((_, index) => {
    const { title: name, avatar } = nextTeamMember();
    const { title, description, logo } = nextProject();
    return {
      id: `_${index}`,
      title,
      logo,
      tags: ['html', 'css', 'js', 'build tools'],
      description,
      name,
      avatar,
      datetime: '2024-06-20 10:11',
      star: 88,
      favorite: 167,
      talk: 44,
    };
  });

  return () => (
    <div>
      {articles.map(article => (
        <div key={article.id} className="user-info-article-item">
          <div className="user-info-article-item-title">
            <img src={buildAssetsPath(article.logo)}/>
            <span>{article.title}</span>
          </div>
          <div className="user-info-article-item-tags">
            {article.tags.map(tag => (
              <div key={tag}>{tag}</div>
            ))}
          </div>
          <div className="user-info-article-item-description">{article.description}</div>
          <div className="user-info-article-item-user-information">
            <img src={buildAssetsPath(article.avatar)}/>
            <span className="user-info-article-item-user-name">{article.name}</span>
            <span className="user-info-article-item-user-datetime">{article.datetime}</span>
          </div>
          <div className="user-info-article-item-operation">
            <div><Icon icon="pi-star"/><span>{article.star}</span></div>
            <div><Icon icon="pi-thumb-up"/><span>{article.favorite}</span></div>
            <div><Icon icon="pi-message"/><span>{article.talk}</span></div>
          </div>
        </div>
      ))}
    </div>
  );
});
